import React, { useState } from "react";
import './tablecss.css'
export function MyTable() {
    const [list, setList] = useState<any>([
        {
            name: '张三',
            age: 18,
            addres: "湖北",
            status: false
        }, {
            name: '李四',
            age: 18,
            addres: "湖北",
            status: false
        }, {
            name: '王五',
            age: 18,
            addres: "湖北",
            status: false
        }
    ])

    // const [taglist, setTaglist] = useState<any>(
    //     {
    //         title: "姓名",
    //         ageNumber: "年龄",
    //         addresName: '地址',
    //     }
    // )
    const [taglist, setTaglist] = useState<any>([
        {
            title: "姓名",
        }, {
            title: "年龄",
        }, {
            title: "地址",
        }
    ]
    )
    /*删除*/
    function onDel(item: { name: string; age: any; addres: string; }, index: number) {
        const newList = [...list];
        newList.splice(index, 1);
        setList(newList)
    }
    /*编辑*/
    function onEdit(item: any, index: any) {
        const newList = [...list];
        newList[index].status = true;
        setList(newList)
    }
    /*保存*/
    function onSave(item: { status?: any; }, index: any) {
        const newList = [...list];
        newList[index].status = false;
        setList(newList)
    }
    /*input 改变事件*/
    function changeItem(item: any, index: any) {
        const newList = [...list];
        // 在 newList 数组中索引为 index 的位置上，用一个新的对象替换掉原来的对象。
        // 这个新对象首先是 newList[index] 的一个浅拷贝，然后 item 对象中的属性（如果有重名的）会覆盖掉原对象的属性。
        newList[index] = { ...newList[index], ...item };
        setList(newList);
    }
    /*添加*/
    function add() {
        const newList = [...list];
        newList.push({
            name: '',
            age: null,
            addres: ""
        })
        setList(newList)
    }


    const [popstatus, setPopstatus] = useState(false);
    const [newHead, setNewHead] = useState('');
    /* 动态添加标题弹框 */
    function addHead() {
        setPopstatus(true)

    }
    /*关闭*/
    function off() {
        setPopstatus(false)
    }
    /* 确定添加表头 */
    function confirmAddHead() {
        if (newHead) {
            const newTaglist =[...taglist]; // 使用数组拷贝
            newTaglist.push({ title: newHead });
            setTaglist(newTaglist);
            setNewHead(''); // 清空输入框

            const newList = list.map((item: any) => ({
                ...item,
                [newHead]: newHead // 使用计算属性名称添加新属性
            }));
            setList(newList); // 更新状态
        }
    }


    return (
        <div className="box">
            <div>
                <button onClick={() => addHead()}>添加表头</button>
            </div>
            <table className="table">
                <thead>
                    <tr>
                        {taglist.map((item: any, index: any) => (
                            <th key={index}>{item.title}</th>
                        ))  }
                        
                        <th>操作</th>
                    </tr>
                </thead>
                {/* <tbody>
                    {list.map((item: { status?: any; name: any; age: any; addres: any; }, index: any) => (
                        <>
                            <tr key={index}>
                                <>
                                    <td >
                                        {item.status == false ? (<p>{item.name}</p>)
                                            : (<p><input type="text" value={item.name} onChange={(e) => changeItem({ name: e.target.value }, index)} /></p>)}
                                    </td>

                                    <td >
                                        {item.status == false ? (<p>{item.age}</p>)
                                            : (<p><input type="text" value={item.age} onChange={(e) => changeItem({ age: e.target.value }, index)} /></p>)}
                                    </td>

                                    <td >
                                        {item.status == false ? (<p>{item.addres}</p>)
                                            : (<p><input type="text" value={item.addres} onChange={(e) => changeItem({ addres: e.target.value }, index)} /></p>)}
                                    </td>

                                    <td >
                                        <button onClick={() => onDel(item, index)}>删除</button>
                                        {item.status == false ? (<button onClick={() => onEdit(item, index)}>编辑</button>)
                                            : (<button onClick={() => onSave(item, index)}>保存</button>)}
                                    </td>
                                </>
                            </tr>
                        </>

                    ))}
                </tbody> */}
                                <tbody>
                    {list.map((item: { status?: any; name: any; age: any; addres: any; }, index: any) => (
                        <>
                            <tr key={index}>
                                <>
                                    <td >
                                        {item.status == false ? (<p>{item.name}</p>)
                                            : (<p><input type="text" value={item.name} onChange={(e) => changeItem({ name: e.target.value }, index)} /></p>)}
                                    </td>

                                    <td >
                                        {item.status == false ? (<p>{item.age}</p>)
                                            : (<p><input type="text" value={item.age} onChange={(e) => changeItem({ age: e.target.value }, index)} /></p>)}
                                    </td>

                                    <td >
                                        {item.status == false ? (<p>{item.addres}</p>)
                                            : (<p><input type="text" value={item.addres} onChange={(e) => changeItem({ addres: e.target.value }, index)} /></p>)}
                                    </td>

                                    <td >
                                        <button onClick={() => onDel(item, index)}>删除</button>
                                        {item.status == false ? (<button onClick={() => onEdit(item, index)}>编辑</button>)
                                            : (<button onClick={() => onSave(item, index)}>保存</button>)}
                                    </td>
                                </>
                            </tr>
                        </>

                    ))}
                </tbody>
                <tfoot>
                    <tr>
                        <td colSpan={taglist.length + 1}><button onClick={() => add()}>添加+</button></td>
                    </tr>
                </tfoot>
                
            </table>
            {/* 弹框 */}
            {popstatus && (
                <div className="popstyle">
                    <div className="clonestyle" onClick={off}>x</div>
                    <div className="content">
                        <div>
                            标题 <input type="text" name="" id="" value={newHead} onChange={(e) => setNewHead(e.target.value)} />
                        </div>
                    </div>
                    <div className="btnbox">
                        <button onClick={off}>取消</button>
                        <button onClick={confirmAddHead}>确定</button>
                    </div>
                </div>
            )}

        </div>
    )
}

